import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class TestRowWidget extends StatefulWidget {
  const TestRowWidget({super.key});

  @override
  State<StatefulWidget> createState() {
    return RowState();
  }
}

class RowState extends State<TestRowWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("基础 Row 学习使用"),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text("Row 在主轴(水平)方向占用的空间 \nmainAxisSize: MainAxisSize.min\n尽可能少的占用水平空间"),
            Container(
              color: Colors.blue,
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    "1",
                    style: TextStyle(backgroundColor: Colors.red),
                  ),
                  Text(
                    "2",
                    style: TextStyle(backgroundColor: Colors.green),
                  ),
                  Text(
                    "3",
                    style: TextStyle(backgroundColor: Colors.blue),
                  ),
                  Text(
                    "4",
                    style: TextStyle(backgroundColor: Colors.yellowAccent),
                  ),
                ],
              ),
            ),
            const Text(
                "Row 在主轴(水平)方向占用的空间 \nmainAxisSize: MainAxisSize.max default\n尽可能多的占用水平方向的空间"),
            Container(
              color: Colors.blue,
              child: Row(
                mainAxisSize: MainAxisSize.max,
                children: [
                  Text(
                    "1",
                    style: TextStyle(backgroundColor: Colors.red),
                  ),
                  Text(
                    "2",
                    style: TextStyle(backgroundColor: Colors.green),
                  ),
                  Text(
                    "3",
                    style: TextStyle(backgroundColor: Colors.blue),
                  ),
                  Text(
                    "4",
                    style: TextStyle(backgroundColor: Colors.yellowAccent),
                  ),
                ],
              ),
            ),
            const Text(
                "Row 在主轴(水平)方向占用的空间 MainAxisAlignment\n子组件在Row所占用的水平空间内对齐方式\n如果mainAxisSize值为MainAxisSize.min，则此属性无意义"),
            const Text("\nRow 在主轴(水平)方向占用的空间 \nMainAxisAlignment.center "),
            Container(
              color: Colors.blue,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    "1",
                    style: TextStyle(backgroundColor: Colors.red),
                  ),
                  Text(
                    "2",
                    style: TextStyle(backgroundColor: Colors.green),
                  ),
                  Text(
                    "3",
                    style: TextStyle(backgroundColor: Colors.blue),
                  ),
                  Text(
                    "4",
                    style: TextStyle(backgroundColor: Colors.yellowAccent),
                  ),
                ],
              ),
            ),
            const Text("\nRow 在主轴(水平)方向占用的空间 \nMainAxisAlignment.start "),
            Container(
              color: Colors.blue,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Text(
                    "1",
                    style: TextStyle(backgroundColor: Colors.red),
                  ),
                  Text(
                    "2",
                    style: TextStyle(backgroundColor: Colors.green),
                  ),
                  Text(
                    "3",
                    style: TextStyle(backgroundColor: Colors.blue),
                  ),
                  Text(
                    "4",
                    style: TextStyle(backgroundColor: Colors.yellowAccent),
                  ),
                ],
              ),
            ),
            const Text("\nRow 在主轴(水平)方向占用的空间 \nMainAxisAlignment.end "),
            Container(
              color: Colors.blue,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Text(
                    "1",
                    style: TextStyle(backgroundColor: Colors.red),
                  ),
                  Text(
                    "2",
                    style: TextStyle(backgroundColor: Colors.green),
                  ),
                  Text(
                    "3",
                    style: TextStyle(backgroundColor: Colors.blue),
                  ),
                  Text(
                    "4",
                    style: TextStyle(backgroundColor: Colors.yellowAccent),
                  ),
                ],
              ),
            ),
            const Text("\nRow 在主轴(水平)方向占用的空间 \nMainAxisAlignment.spaceAround "),
            Container(
              color: Colors.blue,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Text(
                    "1",
                    style: TextStyle(backgroundColor: Colors.red),
                  ),
                  Text(
                    "2",
                    style: TextStyle(backgroundColor: Colors.green),
                  ),
                  Text(
                    "3",
                    style: TextStyle(backgroundColor: Colors.blue),
                  ),
                  Text(
                    "4",
                    style: TextStyle(backgroundColor: Colors.yellowAccent),
                  ),
                ],
              ),
            ),
            const Text("\nRow 在主轴(水平)方向占用的空间 \nMainAxisAlignment.spaceBetween "),
            Container(
              color: Colors.blue,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    "1",
                    style: TextStyle(backgroundColor: Colors.red),
                  ),
                  Text(
                    "2",
                    style: TextStyle(backgroundColor: Colors.green),
                  ),
                  Text(
                    "3",
                    style: TextStyle(backgroundColor: Colors.blue),
                  ),
                  Text(
                    "4",
                    style: TextStyle(backgroundColor: Colors.yellowAccent),
                  ),
                ],
              ),
            ),
            const Text("\nRow 在主轴(水平)方向占用的空间 \n  "),
            Container(
              color: Colors.blue,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Text(
                    "1",
                    style: TextStyle(backgroundColor: Colors.red),
                  ),
                  Text(
                    "2",
                    style: TextStyle(backgroundColor: Colors.green),
                  ),
                  Text(
                    "3",
                    style: TextStyle(backgroundColor: Colors.blue),
                  ),
                  Text(
                    "4",
                    style: TextStyle(backgroundColor: Colors.yellowAccent),
                  ),
                ],
              ),
            ),
            const Text("\nRow 在纵轴(垂直)方向的对齐方式 \nVerticalDirection.down CrossAxisAlignment.start"),
            SizedBox(
              width: 100,
              height: 100,
              child: Container(
                color: Colors.blue,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  verticalDirection: VerticalDirection.down,
                  children: [
                    Text(
                      "1",
                      style: TextStyle(backgroundColor: Colors.red, fontSize: 50),
                    ),
                    Text(
                      "2",
                      style: TextStyle(backgroundColor: Colors.green),
                    ),
                    Text(
                      "3",
                      style: TextStyle(backgroundColor: Colors.blue),
                    ),
                    Text(
                      "4",
                      style: TextStyle(backgroundColor: Colors.yellowAccent),
                    ),
                  ],
                ),
              ),
            ),
            const Text("\nRow 嵌套 Row \n外层的Row会尽可能占据更多的空间，但作为子Row所占的空间是自身内部widget的实际大小"),
            Container(
              color: Colors.blue,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                verticalDirection: VerticalDirection.down,
                children: [
                  Text(
                    "parent Row 1",
                    style: TextStyle(backgroundColor: Colors.red),
                  ),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    verticalDirection: VerticalDirection.down,
                    children: [
                      Text(
                        "child Row 2",
                        style: TextStyle(backgroundColor: Colors.red),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            const Text("\nRow 嵌套 Row \n外层的Row会尽可能占据更多的空间，如果想子Row也占据更多的空间,使用Expanded进行包裹"),
            Container(
              color: Colors.blue,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                verticalDirection: VerticalDirection.down,
                children: [
                  Text(
                    "parent Row 1",
                    style: TextStyle(backgroundColor: Colors.red),
                  ),
                  Expanded(
                      child: Container(
                    color: Colors.red,
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      verticalDirection: VerticalDirection.down,
                      children: [
                        Text(
                          "child Row 2",
                          style: TextStyle(backgroundColor: Colors.red),
                        ),
                      ],
                    ),
                  )),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
